<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商家</title>
    <link rel="stylesheet" href="../plugins/layui/layui-v2.5.6/layui/css/layui.css">

</head>
<body>
    <script src="../plugins/layui/layui-v2.5.6/layui/layui.js" charset="utf-8"></script>
    <script>
        layui.use(['form', 'element'], function(){
            var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
            
            //监听导航点击
            element.on('nav(demo)', function(elem){
            //console.log(elem)
            layer.msg(elem.text());
            });
        });

        layui.use('layer', function(){ //独立版的layer无需执行这一句
            var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
            
            //触发事件
            var active = {
                setTop: function(){
                    var that = this; 
                    //多窗口模式，层叠置顶
                    layer.open({
                        type: 2 //此处以iframe举例
                        ,title: '增加商品'
                        ,area: ['50%', '80%']
                        ,shade: 0
                        ,maxmin: true
                        ,content: '../view/add-product.jsp'
                        
                        
                        // ,zIndex: layer.zIndex //重点1
                        // ,success: function(layero){
                        // layer.setTop(layero); //重点2
                        // }
                    });
                },
                del: function(){
                    layer.confirm('确认删除?',
                    {icon: 3, title:'提示'}
                    ,function(index){
                        layer.close(index);
                    });

                }
            }

            $('#layerDemo .layui-btn').on('click', function(){
                var othis = $(this), method = othis.data('method');
                active[method] ? active[method].call(this, othis) : '';
            });
        });

    </script>
          
    <div class="layui-fluid" style="padding: 0">
        <ul class="layui-nav">
            <li class="layui-nav-item layui-this">
                <a href="merchant.jsp">我的商品<span class="layui-badge-dot"></span></a>
            </li>    
            <li class="layui-nav-item">
                <a href="merchant-orders.jsp">我的订单<span class="layui-badge">9</span></a>
            </li>
            <li class="layui-nav-item">
                <a href="merchant-comment.jsp ">收到评论<span class="layui-badge-dot"></span></a>
            </li>    
            <li class="layui-nav-item">
              <a href=""><img src="../img/b1.png" class="layui-nav-img">${loginName}</a>
              <dl class="layui-nav-child">
                <dd><a href="javascript:;">修改信息</a></dd>
                <dd><a href="javascript:;">安全管理</a></dd>
                <dd><a href="javascript:;">退了</a></dd>
              </dl>
            </li>
          </ul>
    </div>

    <div class="merchant-product"  id="layerDemo" style="padding: 20px;">

        <div class="main-two layui-form" >
            <div class = "item">
                <div class="item-f">
                    <div class="site-demo-button">
                        <button class="layui-btn" data-method="setTop" >增加商品</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-row" style="background-color: #eaeaea;text-align: center;height: 30px;line-height: 30px;color: #666666;margin-top: 15px;">
            <div class="layui-col-md6">
                商品详情介绍
            </div>
            <div class="layui-col-md2">
                存货
            </div>
            <div class="layui-col-md2">
                价格
            </div>
            <div class="layui-col-md2">
                操作
            </div>
        </div>


        <div class="layui-form" style="border:solid 0.5px #eeeeee;margin-top: 10px;">
            <div class="my-product item" style="padding: 5px;height: 20px;">
                <div class="product-name" style="margin-left:20px;float: left;">
                    <span style="font-size: 25px;">真香榴莲</span>
                </div>
                <div class="customer-del" style="float: right;">
                    <button class="layui-btn" data-method="del" style="background-color: white;color: #000;"><i class="layui-icon">&#x1006;</i></button>
                </div>
            </div>

            <div class="order-detail-table" style="margin-top: 15px;">
                <div class="order-detail-title" style="background-color: #eaeaea;height: 30px;line-height: 30px;">
                    <span style="margin-left: 20px;color: #666666;">发布时间:</span>
                    <span style="color: #aaaaaa;">2020-06-12  20:20:20 </span>
                    
                </div>

                <div class="layui-row" style="background-color: #ffffff;text-align: center;height: 60px;padding-top: 15px;padding-bottom: 15px;">
                    <div class="layui-col-md6" style="line-height: 60px;">
                        <div class="layui-col-md2">
                            <img src="../img/p2.png" alt="">
                        </div>
                        <div class="layui-col-md10">云南新鲜夏黑葡萄无籽葡萄5斤【礼盒装】 新鲜水果葡萄提子京东生鲜</div>
                    </div>
                    <div class="layui-col-md2"  style="line-height: 60px;">
                        10
                    </div>
                    <div class="layui-col-md2"  style="line-height: 60px;">
                        <span>¥49.99</span>
                    </div>

                    <div class="layui-col-md2" style="line-height: 60px;">
                        <span><a href="">编辑</a></span>
                        
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-form" style="border:solid 0.5px #eeeeee;margin-top: 10px;">
            <div class="my-product item" style="padding: 5px;height: 20px;">
                <div class="product-name" style="margin-left:20px;float: left;">
                    <span style="font-size: 25px;">真香榴莲</span>
                </div>
                <div class="customer-del" style="float: right;">
                    <button class="layui-btn" data-method="del" style="background-color: white;color: #000;"><i class="layui-icon">&#x1006;</i></button>
                </div>
            </div>

            <div class="order-detail-table" style="margin-top: 15px;">
                <div class="order-detail-title" style="background-color: #eaeaea;height: 30px;line-height: 30px;">
                    <span style="margin-left: 20px;color: #666666;">发布时间:</span>
                    <span style="color: #aaaaaa;">2020-06-12  20:20:20 </span>
                    
                </div>

                <div class="layui-row" style="background-color: #ffffff;text-align: center;height: 60px;padding-top: 15px;padding-bottom: 15px;">
                    <div class="layui-col-md6" style="line-height: 60px;">
                        <div class="layui-col-md2">
                            <img src="../img/p2.png" alt="">
                        </div>
                        <div class="layui-col-md10">云南新鲜夏黑葡萄无籽葡萄5斤【礼盒装】 新鲜水果葡萄提子京东生鲜</div>
                    </div>
                    <div class="layui-col-md2"  style="line-height: 60px;">
                        10
                    </div>
                    <div class="layui-col-md2"  style="line-height: 60px;">
                        <span>¥49.99</span>
                    </div>

                    <div class="layui-col-md2" style="line-height: 60px;">
                        <span><a href="">编辑</a></span>
                        
                    </div>
                </div>
            </div>
        </div>

    </div>
</body>
</html>